Cataloged Autobiography BERKENAAN SAYA  Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca.. | The Readable Journal MENEROKA ARTIKEL  Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini | Astrolab Tool KATEGORI ARTIKEL  Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini |
 BINA TYPOGRAPHY INDAH DENGAN CSS3 |
| October 5, 2010 Posted by: Fauzie |
Tutorial ini berdasarkan artikel oleh Matt Ward dari echo enduringblog. Tujuan utama demonstrasi ini ialah untuk menilai sejauh mana keberkesanannya dapat dibuat melalui platform Blogger dan juga ingin berkongsi sama di dalam mempelajari penggunaan CSS3 bagi memperbagaikan gaya atau "styling effect" bagi typography atau penggunaan huruf dalam website design.
Seperti yang anda lihat dalam "live demo" di bawah ini, ia dapat diterima dengan baik oleh platform Blogger dan keputusannya sangat menarik.
Setengah pendapat mengatakan website menggandungi 95% typography dan jika pendapat ini benar, ini bermakna typography memainkan peranan atau elemen yang sangat penting dalam persembahan sesuatu website itu, dan ia sebenarnya dapat diterjemahkan dengan cara mudah melalui penggunaan Cascading Style Sheet atau CSS.
Dalam tutorial berikut ini, mari kita lihat bagaimana kod-kod CSS3 berupaya membina "typographic design" yang cantik dan menarik.
Di bawah ini ialah "Live Demo" artikel yang telah diberi gaya atau style dengan menggunakan CSS3:
"Live Demo"
Typography WebDemonstrasi Keindahan Typography Menggunakan CSS
Apa yang sering diperkatakan tentang kehebatan sesuatu website itu ialah ia dibina berasaskan kepada kecantikan dan penggunaan typographynya. Dan ini bermakna, ia merupakan satu elemen yang sangat penting dan harus diambil berat dalam membina sesuatu website.
Penggunaan CSS telah memberi kita berbagai pilihan untuk membuat "styling" atau gaya yang lebih mudah didalam menyediakan "content" sesuatu website itu. Demo ini - yang mana dijana sepenuhnya dengan CSS - dibina untuk menunjukkan cara membina atau menyediakan typography yang indah dari asas HTMLnya hingga kepada kod CSS iaitu daripada "unstyled" typo kepada design sepenuhnya. Untuk demo ini sedikit perubahan telah dibuat bagi kesesuaian template blog ini.
Ditulis: 5 Oktober , 2010
Kod Mark-Up
Sebagai permulaan jom kita sediakan "content" dengan menggunakan mark-up asas html seperti berikut:
<div class="tajuk">Typography Web<span>Demonstrasi Keindahan Typography Menggunakan CSS</span></div>
<div class="meta">Demonstrasi <span> Dibina Berdasarkan contoh</span> oleh <span>Matt Ward</span></div>
<div class="isi"><p><span >Apa yang sering diperkatakan tentang kehebatan sesuatu</span> website itu ialah ia dibina berasaskan kepada kecantikan dan penggunaan typographynya. Dan ini bermakna, ia merupakan satu elemen yang sangat penting dan harus diambil berat dalam membina sesuatu website.</p>
<p><span style="color:black; font-weight:normal;">Penggunaan CSS telah memberi kita berbagai pilihan</span> untuk membuat "styling" atau gaya yang lebih mudah didalam menyediakan "content" sesuatu website itu. Demo ini - yang mana dijana sepenuhnya dengan CSS - dibina untuk menunjukkan cara membina atau menyediakan typography yang indah dari asas HTMLnya hingga kepada kod CSS iaitu daripada "unstyled" typo kepada design sepenuhnya. Untuk demo ini sedikit perubahan telah dibuat bagi kesesuaian template blog ini.</p><div class="date">Ditulis: 5 Oktober , 2010</div>
<div class="meta">Demonstrasi <span> Dibina Berdasarkan contoh</span> oleh <span>Matt Ward</span></div>
<div class="isi"><p><span >Apa yang sering diperkatakan tentang kehebatan sesuatu</span> website itu ialah ia dibina berasaskan kepada kecantikan dan penggunaan typographynya. Dan ini bermakna, ia merupakan satu elemen yang sangat penting dan harus diambil berat dalam membina sesuatu website.</p>
<p><span style="color:black; font-weight:normal;">Penggunaan CSS telah memberi kita berbagai pilihan</span> untuk membuat "styling" atau gaya yang lebih mudah didalam menyediakan "content" sesuatu website itu. Demo ini - yang mana dijana sepenuhnya dengan CSS - dibina untuk menunjukkan cara membina atau menyediakan typography yang indah dari asas HTMLnya hingga kepada kod CSS iaitu daripada "unstyled" typo kepada design sepenuhnya. Untuk demo ini sedikit perubahan telah dibuat bagi kesesuaian template blog ini.</p><div class="date">Ditulis: 5 Oktober , 2010</div>
Struktur "content" di atas ialah, heading atau subheading dibezakan dengan tag <span> dan ikuti dengan maklumat pengarang, isi dan tarikh artikel ditulis.
Jika dilihat "content" yang tidak digayakan atau "unstyled", ia akan kelihatan seperti di bawah ini. Tetapi bila digayakan dengan CSS3, ia akan kelihatan lebih menarik.
Langkah 1
Perkara pertama yang harus diberi perhatian ialah Tajuk. Kita akan menukar warnanya, "typeface", saiz dan "traking". Di bawah ini ialah kod CSS (full style rule) untuk mendapatkan contoh seperti screenshot berikut:
.tajuk {
font-size: 3.0em;
font-weight: bold;
font-family: Georgia;
letter-spacing: 0.1em;
color: rgb(142,11,0);
text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}
Langkah 2
Untuk langkah ke 2, kita akan memberi gaya tambahan supaya "Tajuk" nampak lebih sempurna dan menarik. Ini ialah kod CSS tambahannya dan dengan kod ini, tajuk akan kelihatan seperti screenshot di bawahnya:
.tajuk span {
display: block;
margin-top: 0.5em;
padding-bottom:1.5em;
font-family: Verdana;
font-size: 0.6em;
font-weight: normal;
letter-spacing: 0em;
text-shadow: none;
}
Langkah 3
Bagi langkah ke 3 dan langkah ke 4 ini, styling atau gaya akan melibatkan apa yang di panggil "meta data line" dimana kita akan membuat perbezaan yang ketara pada ayat baris ketiga daripada ayat-ayat baris satu dan dua (iaitu tajuk dan sub-tajuk). Di bawah ini adalah kod CSSnya:
.meta {
font-family: Georgia;
color: rgba(69,54,37,0.6);
font-size: 0.85em;
font-style: italic;
letter-spacing: 0.25em;
border-bottom: 1px solid rgba(69,54,37,0.2);
padding-bottom: 0.5em;
}
Dalam kod CSS di atas, "font-style" telah diperkenalkan iaitu jenis "italic". Dan jika anda lihat screenshot pula, ayat pada baris ketiga bertukar kepada bentuk italic (mereng). Font family "Georgia" masih digunakan di sini untuk menyeragamkan dengan font "Tajuk" (font untuk sub-tajuk ialah jenis Verdana).
Perhatikan pula kod warna. "Color definition" rgba () telah digunakan dan bukan rgb () (warna asas "Red", "Green", "Blue"). Penggunaan rgba () ini adalah salah satu keistemewaan bagi CSS3 kerana ia merujuk kepada penambahan dimensi keempat (4th dimension) iaitu apa yang dikenali sebagai "alpha channel" yang membolehkan kita mengawal "opacity".
Nota: Bagi rgba (), property keempat (iaitu nombor di antara "0" hingga "1") merujuk kepada "level of transparency" (terang atau gelap) yang digunakan ke atas sesuatu warna. Malangnya property ini tidak boleh diterima (tidak kelihatan) dalam browser IE (Internet Explorer).
Langkah 4
Dalam langkah keempat ini pula, kita akan membuat sedikit perubahan ke atas "meta data line" ini (iaitu ayat baris ketiga). Jika anda perhatikan ayat baris ketiga dalam contoh "Live Demo", perkataan-perkataan "Demonstrasi" dan "Oleh" dalam bentuk "italic" dan tidak bagi perkataan "Dibina Berdasarkan Contoh" serta nama pengarang.
Ini juga merupakan satu lagi contoh keistimewaan CSS3. Perkataan-perkataan yang tidak berbentuk italic itu sebenarnya telah "dikepong" atau "dikelilingi" oleh tag <span>. Dan ditambah pula dengan "color definition" rgba (), semua perkataan berbentuk italic akan kelihatan lebih "cerah" ("low level of transparency").
Kod CSS untuk mendapatkan effect di atas adalah seperti berikut:
.meta span {
text-transform: capitalize;
font-style: normal;
color: rgba(69,54,37,0.8);
}
Langkah 5
Untuk langkah kelima ini, isi atau content akan diasingkan dalam bentuk dua column. Sebelum penemuan CSS3, proses membuat isi atau content dalam bentuk column adalah sangat rumit. Isi akan dibahagikan kepada beberapa blok. Perkembangan CSS telah memudahkan kita membuat artikel dalam bentuk column dengan hanya menaip beberapa baris kod sahaja iaitu "column-count"
Jika anda perhatikan screenshot di bawah ini, isi telah dibahagi kepada dua column (sebelum ini isi atau content mempunyai 2 perenggan). Effect ini dibina dengan menambah kod CSS berikut:
.isi p {
font-family: Verdana;
-moz-column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
column-count: 2;
column-gap: 1em;
line-height: 1.5em;
color: rgb(69,54,37);
font-weight: normal;
}
Nota: Perhatikan kod -moz-column-count:2, -webkit-column-count:2 dan column-count: 2. -moz- merujuk kepada kesesuaian untuk browser Firefox dan -webkit- merujuk kepada browser Safari dan angka 2 merujuk kepada 2 column.
Langkah 6
Pada langkah kelima kita telah membina 2 column untuk isi atau content. Jika anda perhatikan screenshot, artikel contoh ini mempunyai 2 perenggan pada perinkat awalnya. Sekarang mari kita jadikan perenggan pertama sebagai perenggan biasa dan perenggan kedua tetap dalam bentuk 2 column (lihat screenshot di bawah).
Untuk mendapatkan effect tersebut kita gunakan "first-child pseudo class properties", dan berikan "column-count" sebagai "1" (untuk mendapatkan bentuk 1 column).
Kita juga boleh "bold"kan dan besarkan font bagi semua huruf dalam baris pertama untuk perenggan ini dengan memperkenalkan kod "first-line pseudo-class".
Kod CSS untuk effect ini adalah seperti berikut:
.isi p:first-child {
font-size: 1.25em;
font-family: Georgia;
font-style: italic;
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
letter-spacing: 0.1em;
font-weight: normal;
}
.isi p:first-child:first-line {
font-weight: bold;
}
Langkah 7
Proses "typographic styling" untuk artikel contoh ini hampir selesai. Sekarang kita hanya tinggal satu lagi perkara yang harus diberi gaya, iaitu "Tarikh".
Kod CSS untuk mendapatkan effect "tarikh" seperti dalam screenshot di bawah ini ialah seperti berikut:
.date {
font-family: Georgia;
color: rgba(69,54,37,0.6);
font-size: 0.75em;
font-style: italic;
letter-spacing: 0.25em;
border-top: 1px solid rgba(69,54,37,0.2);
display: block;
padding-top: 0.5em;
margin-top: 2em;
}
Kod penuh Mark-up dan CSS bagi tutorial ini adalah seperti berikut. Anda boleh mencubanya dengan copy & paste kod-kod ini dalam Notepad dan save dengan nama fail mestilah mempunyai extension .html
<html>
<head>
<style type="text/css">
.tajuk {
font-size: 3.0em;
font-weight: bold;
font-family: Georgia;
letter-spacing: 0.1em;
color: rgb(142,11,0);
text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}
.tajuk span {
display: block;
margin-top: 0.5em;
padding-bottom:1.5em;
font-family: Verdana;
font-size: 0.6em;
font-weight: normal;
letter-spacing: 0em;
text-shadow: none;
}
.meta {
font-family: Georgia;
color: rgba(69,54,37,0.6);
font-size: 0.85em;
font-style: italic;
letter-spacing: 0.25em;
border-bottom: 1px solid rgba(69,54,37,0.2);
padding-bottom: 0.5em;
}
.meta span {
text-transform: capitalize;
font-style: normal;
color: rgba(69,54,37,0.8);
}
.isi p {
font-family: Verdana;
-moz-column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
column-count: 2;
column-gap: 1em;
line-height: 1.5em;
color: rgb(69,54,37);
font-weight: normal;
}
.isi p:first-child {
font-size: 1.25em;
font-family: Georgia;
font-style: italic;
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
letter-spacing: 0.1em;
font-weight: normal;
}
.isi p:first-child:first-line {
font-weight: bold;
}
.date {
font-family: Georgia;
color: rgba(69,54,37,0.6);
font-size: 0.75em;
font-style: italic;
letter-spacing: 0.25em;
border-top: 1px solid rgba(69,54,37,0.2);
display: block;
padding-top: 0.5em;
margin-top: 2em;
}
</style>
</head>
<body>
<div class="tajuk">Typography Web<span>Demonstrasi Keindahan Typography Menggunakan CSS</span></div>
<div class="meta">Demonstrasi <span> Dibina Berdasarkan contoh</span> oleh <span>Matt Ward</span></div>
<div class="isi"><p>Apa yang sering diperkatakan tentang kehebatan sesuatu website itu ialah ia dibina berasaskan kepada kecantikan dan penggunaan typographynya. Dan ini bermakna, ia merupakan satu elemen yang sangat penting dan harus diambil berat dalam membina sesuatu website.</p>
<p>Penggunaan CSS telah memberi kita berbagai pilihan untuk membuat "styling" atau gaya yang lebih mudah didalam menyediakan "content" sesuatu website itu. Demo ini - yang mana dijana sepenuhnya dengan CSS - dibina untuk menunjukkan cara membina atau menyediakan typography yang indah dari asas HTMLnya hingga kepada kod CSS iaitu daripada "unstyled" typo kepada design sepenuhnya. Untuk demo ini sedikit perubahan telah dibuat bagi kesesuaian template blog ini.</p>
<div class="date">Ditulis: 5 Oktober , 2010</div>
</div>
</body>
</html>
<head>
<style type="text/css">
.tajuk {
font-size: 3.0em;
font-weight: bold;
font-family: Georgia;
letter-spacing: 0.1em;
color: rgb(142,11,0);
text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}
.tajuk span {
display: block;
margin-top: 0.5em;
padding-bottom:1.5em;
font-family: Verdana;
font-size: 0.6em;
font-weight: normal;
letter-spacing: 0em;
text-shadow: none;
}
.meta {
font-family: Georgia;
color: rgba(69,54,37,0.6);
font-size: 0.85em;
font-style: italic;
letter-spacing: 0.25em;
border-bottom: 1px solid rgba(69,54,37,0.2);
padding-bottom: 0.5em;
}
.meta span {
text-transform: capitalize;
font-style: normal;
color: rgba(69,54,37,0.8);
}
.isi p {
font-family: Verdana;
-moz-column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
column-count: 2;
column-gap: 1em;
line-height: 1.5em;
color: rgb(69,54,37);
font-weight: normal;
}
.isi p:first-child {
font-size: 1.25em;
font-family: Georgia;
font-style: italic;
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
letter-spacing: 0.1em;
font-weight: normal;
}
.isi p:first-child:first-line {
font-weight: bold;
}
.date {
font-family: Georgia;
color: rgba(69,54,37,0.6);
font-size: 0.75em;
font-style: italic;
letter-spacing: 0.25em;
border-top: 1px solid rgba(69,54,37,0.2);
display: block;
padding-top: 0.5em;
margin-top: 2em;
}
</style>
</head>
<body>
<div class="tajuk">Typography Web<span>Demonstrasi Keindahan Typography Menggunakan CSS</span></div>
<div class="meta">Demonstrasi <span> Dibina Berdasarkan contoh</span> oleh <span>Matt Ward</span></div>
<div class="isi"><p>Apa yang sering diperkatakan tentang kehebatan sesuatu website itu ialah ia dibina berasaskan kepada kecantikan dan penggunaan typographynya. Dan ini bermakna, ia merupakan satu elemen yang sangat penting dan harus diambil berat dalam membina sesuatu website.</p>
<p>Penggunaan CSS telah memberi kita berbagai pilihan untuk membuat "styling" atau gaya yang lebih mudah didalam menyediakan "content" sesuatu website itu. Demo ini - yang mana dijana sepenuhnya dengan CSS - dibina untuk menunjukkan cara membina atau menyediakan typography yang indah dari asas HTMLnya hingga kepada kod CSS iaitu daripada "unstyled" typo kepada design sepenuhnya. Untuk demo ini sedikit perubahan telah dibuat bagi kesesuaian template blog ini.</p>
<div class="date">Ditulis: 5 Oktober , 2010</div>
</div>
</body>
</html>
Kembali ke Archives
Kembali kepada | Archives →
Sebarang komen dan pertanyaan, sila klik butang di bawah ini:
